<template>
  <div class="details" v-if="postData.city">
    <el-row :gutter="20">
      <el-col :span="17">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/post' }"
            >旅游攻略</el-breadcrumb-item
          >
          <el-breadcrumb-item>攻略详情</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 标题 -->
        <h1 class="title">{{ postData.title }}</h1>
        <hr />
        <!-- 时间，阅读 -->
        <div class="time">
          <span>攻略:{{ postData.city.created_at }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;<span>阅读:{{ postData.watch }}</span>
        </div>
        <!-- 简介 -->
        <div v-html="postData.content" class="postContent"></div>
        <!-- 点赞，评论图标，分享图标 -->
        <div class="postCtrl">
          <div>
            <i class="iconfont iconpinglun"></i>
            <p>评论({{ postData.comments.length }})</p>
          </div>
          <div
            @click="$message({ message: '暂时不支持分享', type: 'warning' })"
          >
            <i class="iconfont iconfenxiang"></i>
            <p>分享</p>
          </div>
        </div>
        <!-- 文本域 -->
        <div class="texta">
          <h3 style="margin: 20px 0">评论</h3>
          <span class="reply" v-if="isShow"
            >回复 @{{ nickname }} &nbsp;&nbsp;<i
              @click="close"
              style="cursor: pointer"
              >x</i
            ></span
          >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea"
            resize="none"
          >
          </el-input>
        </div>
        <!-- 图片和发布评论按钮 -->
        <div class="pic">
          <el-row type="flex" justify="space-between" class="upload-box">
            <div class="upload">
              <el-upload
                :action="$axios.defaults.baseURL + '/upload'"
                list-type="picture-card"
                name="files"
                :on-success="uploadSuccess"
                :on-remove="removeUpload"
                ref="upload"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="btn">
              <el-button type="primary" size="mini" @click="postComment"
                >发布</el-button
              >
            </div>
          </el-row>
        </div>


        <!-- 评论区 -->
        <div class="comments" v-if="comments.length > 0">
          <commentslist
            :commentsData="item"
            v-for="(item, index) in comments"
            :key="index"
            @sendReply="reply"
          />
        </div>
        <div class="commentsvif" v-else>暂无评论，赶紧抢占沙发</div>


        <!-- 分页 -->
        <div class="fenye">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[1, 2, 3, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-col>


      <el-col :span="7">
        <div class="detailsRight">
          <h4>相关攻略</h4>
          <div
            v-for="(item, index) in recommendList"
            :key="index"
            class="detailsItem"
            @click="recommendWatch(item.id)"
          >
            <div class="itemLeft" v-if="item.images.length > 0">
              <img :src="item.images" alt />
            </div>
            <div class="itemRight">
              <div class="itemRightTop">{{ item.title }}</div>
              <div class="itemRightBottom">
                <span>{{
                  $moment(item.updated_at).format("YYYY-MM-DD hh:mm")
                }}</span>
                <span>阅读:{{ item.watch }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>

import commentslist from '@/components/post/commentsList'
export default {
  components:{
    commentslist
  },
  data() {
    return {
      postData: {}, //存放攻略详情


      goodNum: "", //点赞


      textarea: "", //文本域
      pics: [], //用于存放发布图片
      follow: "", //回复id


      comments: [], //文章评论


      pageIndex: 0, // 当前页
      pageSize: 5, //一页多少条数据
      total: 10, //总评论数


      recommendList: [], //相关攻略列表


      isShow: false, //回复评论的时候才显示
      nickname: "", //用于接收回复的名字
    };
  },
  mounted() {
    
    // console.log(this.$route.query.id);
    //获取文章数据渲染
    this.getLoad();
    //获取文章评论
    this.getComments();
    //获取相关攻略
    this.getRecommend();
  },
  methods: {
    //文章点赞
    good() {
      this.$axios({
        url: "/posts/like",
        params: {
          id: this.$route.query.id,
        },
        headers: {
          Authorization: "Bearer " + this.$store.state.userstore.userInfo.token,
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.message == "点赞成功") {
          this.$message.success(res.data.message);
          this.getLoad();
        }
      });
    },
    //获取文章数据渲染
    getLoad() {
      this.$axios({
        url: "/posts",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        // console.log(res.data.data);
        this.goodNum = res.data.data[0].like;
        this.postData = res.data.data[0];
        // console.log(this.postData);
      });
    },
    //文件上传成功时的钩子函数
    uploadSuccess(response) {
      // console.log(response, file, fileList0);
      this.$message.success("图片上传成功");
      this.pics.push(response[0]);
      // console.log(this.pics);
    },
    //文件列表移除文件时的钩子函数
    removeUpload(file, fileList) {
      // console.log(file, fileList);
      this.$message.info("图片移除成功");
      this.pics = fileList;
    },
    //发布评论
    postComment() {
      console.log(111);
      const token =this.$store.state.userstore.userInfo.token
      console.log(token);
      if(token){
        this.$axios({
        url: "/comments",
        method: "post",
        headers: {
          Authorization: "Bearer " + token,
        },
        data: {
          content: this.textarea,
          pics: this.pics,
          post: this.$route.query.id,
          follow: this.follow,
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.message == "提交成功") {
          this.$message.success("发布成功");
          this.$refs.upload.clearFiles();
          this.textarea = null;
          this.getComments();
        }
      });
      }else {
        this.$message.error('请先登录')
      }
      // console.log(this.pics);
      
    },
    //获取文章评论
    getComments() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id,
          _start: this.pageIndex,
          _limit: this.pageSize,
        },
      }).then((res) => {
        // console.log(res);
        let { data, total } = res.data;
        this.total = total;
        this.comments = data;
      });
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageIndex = val - 1;
    },
    //获取相关攻略
    getRecommend() {
      this.$axios({
        url: "/posts/recommend",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        // console.log(res);
        this.recommendList = res.data.data;
      });
    },
    //点击相关攻略
    recommendWatch(id) {
      // console.log(id);
      this.$router.push({
        path: "/post/details",
        query: {
          id,
        },
      });
    },
    //回复评论
    reply(id, nickname) {
      // console.log(id, nickname);
      this.nickname = nickname;
      this.follow = id;
      this.isShow = true;
    },
    //回复评论时点击了x，关闭回复评论
    close() {
      this.nickname = "";
      (this.follow = ""), (this.isShow = false);
    },
  },
  watch: {
    //监听当前页数发生变化时重新获取评论数据
    pageIndex() {
      this.getComments();
      // console.log(this.pageIndex);
      // console.log(this.pageSize);
      // console.log(this.comments);
    },
    //监听当前每页显示多少个数据发生变化时重新获取评论数据
    pageSize() {
      this.getComments();
      // console.log(this.pageSize);
      // console.log(this.comments);
    },
    //监听点击相关攻略后路由的变化
    $route() {
      //获取文章数据渲染
      this.getLoad();
      //获取文章评论
      this.getComments();
    },
  },
};
</script>
<style lang="less" scoped>
.details {
  width: 1000px;
  margin: 20px auto;
  .title {
    margin: 20px 0;
  }
  .time {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
    color: #666;
  }
  .postContent {
    /deep/ img {
      max-width: 100%;
      
    }
  }
  .postCtrl {
    margin: 50px 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    div {
      margin: 0 10px;
      font-size: 14px;
      color: #666;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      cursor: pointer;
    }
    .iconding,
    .iconstar1,
    .iconpinglun,
    .iconfenxiang {
      font-size: 30px;
      color: orange;
    }
  }
  .texta {
    .reply {
      height: 30px;
      line-height: 30px;
      color: #999;
      border-radius: 4px;
      box-sizing: border-box;
      border: 1px solid rgba(64, 158, 255, 0.2);
      background-color: rgba(144, 147, 153, 0.1);
      border-color: rgba(144, 147, 153, 0.2);
      white-space: nowrap;
      padding: 5px 10px;
    }
    /deep/ .el-textarea {
      margin-top: 10px;
    }
  }
  .pic {
    margin-top: 10px;
    /deep/ .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
    /deep/ .el-upload-list__item {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }
  }
  .comments {
    margin-top: 20px;
  }
  .commentsvif {
    margin-top: 20px;
    border: 1px solid #999;
    text-align: center;
    height: 80px;
    line-height: 80px;
    color: #999;
  }
  .fenye {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .detailsRight {
    h4 {
      font-weight: 400;
      font-size: 18px;
      color: #000;
      padding-bottom: 20px;
      border-bottom: 1px solid #000;
    }
    .detailsItem {
      display: flex;
      justify-content: flex-end;
      margin: 10px 0;
      border-bottom: 1px solid #ddd;
      height: 120px;
      cursor: pointer;
      .itemLeft {
        img {
          width: 100px;
          height: 100px;
        }
      }
      .itemRight {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        .itemRightTop {
          font-size: 16px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .itemRightBottom {
          width: 100%;
          font-size: 12px;
          color: #999;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
 /deep/p{
  line-height: 25px;
  font-size: 16px;
}
</style>